<template>
	<view class="nav">
		<!-- 状态栏 -->
		<view :style="'height:'+statusH+'rpx;'+statusBackground" class="nav-status"></view>
		<!-- 首页导航栏 -->
		<view class="home-nav" v-if="isHome" :style="
			'height:'+ containerH + 'rpx;line-height:'+ containerH + 'rpx;'" style="padding-left: 20rpx;">
			<text class="city">中部地区</text>
			<!-- 搜索框的动态样式  
					高度和行高 = 胶囊的高度 * 2
					外右边距 = 胶囊的宽度 * 2 + 24(额外的)
					外上边距 = 胶囊距离顶部的高度 * 2 - 状态栏的高度
					
			备注：此处只能行内动态，函数体中计算会导致样式计算存在偏差不准，导致页面样式对不齐
			-->
			<navigator url="../../pages/search/index" class="searchContainer" :style="'height:' + menu.height * 2 + 'rpx;line-height:' +
			menu.height * 2 + 'rpx;margin-left:56rpx;margin-right:' +
			(menu.width * 2 + 24) + 'rpx;margin-top:' +
			(menu.top * 2 - statusH) + 'rpx;'">
				<text class="search-text">找医院</text>
			</navigator>
		</view>
		<!-- 内容 -->
		<view :style="'height:'+containerH+'rpx;'+contaninerBackground" class="nav-container" v-else>
			<!-- 图标  如果路由栈不为空，则显示返回上一级；否则显示小房子代表返回首页 -->
			<view class="nav-icon" @click="goPage">
				<view v-if="pageLeng > 1">
					<image src="../../static/resource/navbar/ic_back.png"></image>
				</view>
				<view v-else>
					<image src="../../static/resource/navbar/ic_home.png"></image>
				</view>
			</view>
			<view class="nav-title" :style="'height:'+containerH+'rpx;line-height:'+containerH + 'rpx;'+textStyle">
				{{ title }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onBeforeMount,
		onMounted,
		defineProps,
	} from 'vue'
	const props = defineProps({
		// 状态栏
		StatusBGColor: {
			type: String,
			default: 'rgba(255,255,255,1)'
		},
		// 内容
		containerBGColor: {
			type: String,
			default: 'rgba(255,255,255,1)'
		},
		// 字体大小
		fontSize: {
			type: Number,
			default: 32
		},
		// 文字颜色
		textColor: {
			type: String,
			default: 'rgba(0,0,0,1)'
		},
		// 图片宽度
		iconWidth: {
			type: Number,
			default: 116
		},
		// 图片高度
		iconHeight: {
			type: Number,
			default: 38
		},
		// 标题
		title: {
			type: String,
			default: '首页'
		},
		isHome: {
			type: Boolean,
			default: false
		}
	})


	// 状态栏高度
	const statusH = ref(0)
	// 内容高度
	const containerH = ref(0)
	// 状态和内容的背景颜色
	const statusBackground = ref('')
	const contaninerBackground = ref('')
	// 图片高宽
	const iconStyle = ref('')
	// 文字样式（大小/颜色）
	const textStyle = ref('')
	// 获取页面栈的长度
	const pageLeng = ref(getCurrentPages().length)
	// 获取导航栏胶囊的属性信息
	const menu = reactive(uni.getMenuButtonBoundingClientRect())

	// 根据机型设置不同的样式
	const setNavStyle = () => {
		// 从同步的获取信息信息中 取出当前机型、状态栏高度 
		const {
			statusBarHeight,
			system
		} = uni.getSystemInfoSync()
		// 为了自适应用rpx,所以需要乘2
		statusH.value = statusBarHeight * 2
		// 如果当前机型为IOS，则用对应的值
		const isIOS = system.indexOf('iOS') > -1; // 找到则为true，否则为false
		if (!isIOS) { // 安卓
			containerH.value = 96
		} else { // 苹果
			containerH.value = 88
		}

	}
	// 动态设置不同的样式
	const setStyle = () => {
		const {
			StatusBGColor,
			containerBGColor,
			iconHeight,
			iconWidth,
			fontSize,
			textColor
		} = props
		// 用传进来的值进行赋值
		statusBackground.value = ['background-color:' + StatusBGColor].join(';'); // 状态栏背景色
		contaninerBackground.value = ['background-color:' + containerBGColor].join(';'); // 内容栏背景色
		iconStyle.value = ['width:' + iconWidth + "rpx;" + 'height:' + iconHeight + "rpx"].join(';'); // 图标样式
		textStyle.value = ['color:' + textColor + ';' + 'font-size:' + fontSize + 'rpx'].join(";"); // 文字样式
	}

	// 根据页面栈的长度跳转到不同的页面
	const goPage = () => {
		// 如果页面栈大于1，回退的页面长度就等于页面栈的长度；页面栈长度为0则回首页
		if (pageLeng.value > 1) {
			uni.navigateBack({
				delta: pageLeng.value
			})
		} else {
			uni.navigateTo({
				url: '/pages/index/index'
			})
		}
	}

	// 挂载前先修改DOM的样式
	onBeforeMount(() => {
		setNavStyle()
		setStyle()
	})
	onMounted(() => {})
</script>

<style>
	/* 整个nav */
	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
	}

	.nav-container {
		position: relative;
	}

	.nav-icon {
		display: flex;
		align-items: center;
		width: 64rpx;
		height: 64rpx;
		margin-left: 20rpx;
	}

	.nav-icon image {
		width: 64rpx;
		height: 64rpx;
	}

	.nav-title {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
	}

	.home-nav {
		display: flex;
		background-color: white;
	}

	.city {
		display: inline-block;
		position: relative;
		font-size: 30rpx;
		font-weight: bold;
		padding-left: 55rpx;
		background: url() no-repeat left center;
		background-size: 40rpx;
	}

	.city:after {
		content: ' ';
		display: inline-block;
		height: 6px;
		width: 6px;
		border-width: 1px 1px 0 0;
		border-color: #353535;
		border-style: solid;
		-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		position: relative;
		top: -2px;
		position: absolute;
		top: 50%;
		margin-top: -4px;
		right: -10px;
	}

	.searchContainer {
		flex: 1;
		background-color: #f4f4f4;
		text-align: center;
		border-radius: 200rpx;
	}

	.search-text {
		display: inline-block;
		padding-left: 30rpx;
		color: #bbbbbb;
		font-size: 26rpx;
		background: url() no-repeat left center;
		background-size: 23rpx;
	}
</style>